<template>
  <div class="data-handler-container">
    <!-- <el-divider>#TestAction</el-divider> -->
    <div class="commander">
      <el-button type="primary" size="small" @click="flowStore.getFlowData()">
        <el-icon><Download /></el-icon>
        <span>getFlowData</span>
      </el-button>
      <el-button type="primary" size="small" @click="flowStore.loadFlowData()">
        <el-icon><RefreshLeft /></el-icon>
        <span>loadFlowData</span>
      </el-button>
      <el-button type="primary" size="small" @click="flowStore.loadFlowData(1)">
        <el-icon><Refresh /></el-icon>
        <span>loadFlowData: Anyway</span>
      </el-button>
      <!-- </div>
    <div class="commander"> -->
      <el-divider direction="vertical" />
      <el-button
        type="primary"
        size="small"
        @click="flowStore.getAirportFlowData()"
      >
        <el-icon><Download /></el-icon>
        <span>getFlowData (Airports)</span>
      </el-button>
      <el-button
        type="primary"
        size="small"
        @click="flowStore.loadAirportFlowData()"
      >
        <el-icon><RefreshLeft /></el-icon>
        <span>loadFlowData (Airports)</span>
      </el-button>
      <el-button
        type="primary"
        size="small"
        @click="flowStore.loadAirportFlowData(1)"
      >
        <el-icon><Refresh /></el-icon>
        <span>loadFlowData: Anyway (Airports)</span>
      </el-button>
      <!-- </div>
    <div class="commander"> -->
      <el-divider direction="vertical" />
      <el-button
        :type="flowStore.autoRefresh ? 'success' : 'info'"
        size="small"
        @click="flowStore.autoRefresh = !flowStore.autoRefresh"
      >
        <el-icon :class="[flowStore.autoRefresh ? 'is-loading' : '']">
          <Loading />
        </el-icon>
        <span>AutoReload</span>
      </el-button>
      <el-button
        :type="flowStore.ignoreOther ? 'warning' : 'info'"
        size="small"
        @click="flowStore.ignoreOther = !flowStore.ignoreOther"
      >
        <el-icon><WarningFilled /></el-icon>
        <span>IgnoreOther</span>
      </el-button>
      <el-button
        :type="flowStore.ignoreWarning ? 'danger' : 'info'"
        size="small"
        @click="flowStore.ignoreWarning = !flowStore.ignoreWarning"
      >
        <el-icon><CircleCloseFilled /></el-icon>
        <span>IgnoreWarning</span>
      </el-button>
      <el-divider direction="vertical" />
      <el-date-picker
        style="width: 150px"
        v-model="flowStore.customDate"
        @change="flowStore.getFlowData()"
        size="small"
      />
      <el-button
        :type="
          flowStore.customDate != '' && flowStore.fakeDate ? 'warning' : 'info'
        "
        size="small"
        @click="
          flowStore.customDate != ''
            ? (flowStore.fakeDate = !flowStore.fakeDate)
            : null
        "
      >
        <el-icon><Calendar /></el-icon>
        <span>FakeDate</span>
      </el-button>
      <el-button type="primary" size="small" @click="flowStore.customDate = ''">
        <el-icon>
          <Delete />
        </el-icon>
        <span>ClearRange</span>
      </el-button>
    </div>
    <div class="response">
      <div style="width: 100%">
        <el-text type="info" size="small">replyData</el-text>
        <el-input
          :value="JSON.stringify(flowStore.replyData, null, 2)"
          :rows="20"
          :readonly="true"
          size="small"
          type="textarea"
          resize="none"
          style="font-family: 'Consolas', 'Courier New', Courier, monospace"
        ></el-input>
      </div>
      <div style="padding: 8px"></div>
      <div style="width: 100%">
        <el-text type="info" size="small">replyData (Airports)</el-text>
        <el-input
          :value="JSON.stringify(flowStore.replyDataAirports, null, 2)"
          :rows="20"
          :readonly="true"
          size="small"
          type="textarea"
          resize="none"
          style="font-family: 'Consolas', 'Courier New', Courier, monospace"
        ></el-input>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import useFlowStore from "@/store/flow.js";
const flowStore = useFlowStore();
</script>

<style scoped>
.commander {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 24px 8px;
}

.commander > * {
  margin: 4px;
}

.response {
  display: flex;
  align-items: center;
  padding: 0 12px;
}
</style>
